<template>
  <div class="list">
    <v-navbar/>
    <vue-waterfall-easy ref="waterfall" :imgsArr="imgsArr" @scrollReachBottom="_initImgArr"
                        :isRouterLink="isRouterLink">
      <template slot-scope="props">
        <div class="player_info">
          <div class="name">{{props.value.infos[0].goodsName}}</div>
          <div class="price now">
            <span class="num">￥{{props.value.infos[0].marketRetailPrice}}</span>
            <span class="text old">市场价&nbsp;￥{{props.value.infos[0].platformRetailPrice}}</span>
          </div>
        </div>
        <div class="end-times">
          <span class="text">描述:</span>
          <div class="time-down">
            <span>{{props.value.infos[0].remark}}</span>
          </div>
        </div>
      </template>
      <div slot="waterfall-over">已全部加载</div>
    </vue-waterfall-easy>
    <div class="list-null" v-if="listNull">无内容</div>
    <c-search v-if="gosearch"/>
  </div>
</template>

<script>
  import vueWaterfallEasy from 'vue-waterfall-easy'
  import searchBtn from '@c/searchBtn/searchBtn'
  import CountDown from '@c/countDown/countDown'
  import { mapState, mapMutations } from 'vuex'
  import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
  import { getSustemTime, getCurrentTime, doCountDown, countDown } from '@js/until.js'
  import VNavbar from '@c/navbar/navbar'

  export default {
    name: 'ClassifyList',
    data() {
      return {
        imgsArr: [],
        group: 0,
        isRouterLink: true,
        currentTime: 0,
        timer: '',
        sum: 0,
        queryName: this.$route.query.name,
        listNull: false,//列表是否为空
        limit: 10,//列表查询条数
      }
    },
    components: {
      'search-btn': searchBtn,
      vueWaterfallEasy,
      CountDown,
      VNavbar,
    },
    computed: {
      ...mapState(['share', 'gosearch', 'wtitle', 'rback']),
    },
    methods: {
      ...mapMutations(['WTITLE', 'RBACK']),
      // 下拉加载数据|获得分类查询数据
      _initImgArr() {
        let goodsInfo = {
          id: this.$route.query.id,
          offset: this.sum,
          limit: this.limit,
          type: this.$route.query.type
        }
        this.sum += this.limit
        vpost(vlink.goods, goodsInfo).then(re => {
          if (re.status === 0) {
            if (re.data.length === 0) {
              this.$refs.waterfall.waterfallOver()
              return
            }
            if (this.$route.query.type == 1) {
              console.log(111)
              re.data.forEach(item => {
                item['href'] = '/dealDetail?id=' + item.href
              })
            } else if (this.$route.query.type == 2) {
              console.log(333)
              re.data.forEach(item => {
                item['href'] = '/IntegralDetail?id=' + item.id
              })
            } else {
              console.log(22)
              re.data.forEach(item => {
                item['href'] = '/dealDetail?id=' + item.href
              })
            }

            console.log(re.data)
            this.imgsArr = this.imgsArr.concat(re.data)
          } else {
            this.$Message.warning(re.msg)
          }
        })
      },
      // 显示搜索
      e_gosearch() {
        this.$router.back(-1)
      },
      //返回首页
      _goHome() {
        this.$router.push('/home')
      },
      // 监听路由传值是否改变
      _changeRoute() {
        this._initImgArr()
      },
    },
    created() {
      console.log(this.$route.query.name)
      this.WTITLE(this.$route.query.name)
      this.RBACK(true)
      this._changeRoute()
    },
  }
</script>
